<template>
  <div>
    <c-query-toolbar @query="handleQuery" :loading="queryLoading" :params="queryParams" v-show="showQuery"
      :query-button-disabled="disabled">
      <template #toolbar-left>
        <slot name="toolbar-left" />
      </template>
      <template #toolbar-right>
        <slot name="toolbar-right" />
      </template>
      <el-form-item label="登录名">
        <el-input v-model.trim="queryParams.loginName" clearable></el-input>
      </el-form-item>
      <el-form-item label="所属角色">
        <el-input v-model.trim="queryParams.roleName" clearable></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="queryParams.isDisabled" clearable>
          <el-option label="启用" :value="false"></el-option>
          <el-option label="禁用" :value="true"></el-option>
        </el-select>
      </el-form-item>
    </c-query-toolbar>
    <el-table class="c-mg-t-5p" :data="data" border v-loading="tableLoading">
      <el-table-column type="selection" width="30" align="center" />
      <el-table-column prop="loginName" min-width="180" label="登录名" show-overflow-tooltip />
      <el-table-column prop="roleName" width="150" label="所属角色" show-overflow-tooltip />
      <el-table-column width="80" label="菜单权限" align="center">
        <template #default="{ row }">
          <span class="c-link" @click="openMenuPermissionDialog(row.roleId)">查看</span>
        </template>
      </el-table-column>
      <el-table-column prop="isDisabled" align="center" width="70" sortable="custom" label="状态">
        <template #default="{ row }">
          <el-tag type="danger" v-if="row.isDisabled">禁用</el-tag>
          <el-tag type="success" v-else>启用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" width="120" label="创建时间" sortable="custom">
        <template #default="{ row }">
          <span>{{ toShortDatetimeString(row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="最近更新时间" width="120" sortable="custom">
        <template #default="{ row }">
          <span>{{ toShortDatetimeString(row.updateTime) }}</span>
        </template>
      </el-table-column>
      <slot name="column"></slot>
    </el-table>
    <el-pagination class="c-mg-t-5p" layout="total, sizes, prev, pager, next, jumper" :total="total"
      v-model:current-page="getDataParams.pageIndex" v-model:page-size="getDataParams.pageSize"
      @change="handlePageChange" />
    <menuPermissionDialog ref="menuPermissionDialogRef" :in-dialog="inDialog" />
  </div>
</template>
<script setup>
import menuPermissionDialog from "@/components/sys/role/menuPermissionDialog.vue";
import api from "@/api/sys/user";
import { ref, useTemplateRef } from "vue";
import { toShortDatetimeString } from "@/utils/common.ts"
const props = defineProps({
  disabled: {
    type: Boolean,
    default: false
  },
  showQuery: {
    type: Boolean,
    default: true
  },
  showCheckbox: {
    type: Boolean,
    default: false
  },
  inDialog: {
    type: Boolean,
    default: false
  }
})
const queryParams = ref({
  loginName: "",
  roleName: "",
  isDisabled: null
})
const total = ref(0)
const queryLoading = ref(false)
const tableLoading = defineModel("tableLoading", {
  type: Boolean,
  default: false
})
const data = ref([])
const menuPermissionDialogRef = useTemplateRef("menuPermissionDialogRef")

const expandQuery = defineModel("expand-query", {
  type: Boolean,
  default: true
})

const handleQuery = async (params) => {
  getDataParams.value = { ...getDataParams.value, ...params };
  await getData();
}
const handlePageChange = async () => {
  await getData();
}
const openMenuPermissionDialog = async (roleId) => {
  await menuPermissionDialogRef.value.openByRoleId(roleId);
}

const getDataParams = ref({ pageIndex: 1, pageSize: 10 });
const getData = async () => {
  queryLoading.value = true
  tableLoading.value = true
  const res = await api.getPageList(getDataParams.value);
  data.value = res.data.list;
  total.value = res.data.total;
  queryLoading.value = false
  tableLoading.value = false
}

defineExpose({
  getData
})
</script>